require(['init'], function () {

  var $pagination = $('#js-pagination');
  var pagination;

  function getClassList(query, cb) {
    ajaxMethod({
      url: '/api/classes',
      data: query || {},
      success: function (data) {
        cb && cb(data)
        var $classlistTable = $('#J_classlist').html('')
        var $thead = $('<thead>\
          <tr>\
            <th>'+i18next.t('table.no')+'</th>\
            <th>'+i18next.t('table.classname')+'</th>\
            <th>'+i18next.t('table.coursename')+'</th>\
            <th>'+i18next.t('table.maxnumber')+'</th>\
            <th>'+i18next.t('table.start')+'</th>\
            <th>'+i18next.t('table.totalhours')+'</th>\
	          <th>'+i18next.t('table.progress')+'</th>\
            <th style="width:200px">'+i18next.t('table.handle')+'</th>\
          </tr>\
        </thead>').appendTo($classlistTable)

        var $tbody = $('<tbody></tbody>').appendTo($classlistTable)
        $.each(data.list, function (index, item) {

          var $classItem = $('<tr class="enroll"></tr>')
          $classItem.append('<td>'+ (index+1) +'</td>')
          $classItem.append('<td>'+ item.classname +'</td>')
          $classItem.append('<td>'+ item.coursename +'</td>')
          $classItem.append('<td>'+ item.used_qoutas +'/' + item.quotas +'</td>')
          $classItem.append('<td>'+ (new Date(item.begindate).Format('YYYY-MM-DD') || '--') +'</td>')
          $classItem.append('<td>'+ (item.lessonsQty||'--') +'</td>')
          $classItem.append('<td>'+ ( item.finished_lessons + '/' + item.added_lessons || '--') +'</td>')

          var $handleTd = $('<td></td>').appendTo($classItem)
          var $showbtn = $('<a href="classinfo.html?classuid='+ item.classuid +'" class="ml5"><span class="btn btn-primary btn-sm btn-inverse">'+i18next.t('table.class')+'</span></a>').appendTo($handleTd)
          var $editbtn = $('<a href="lessoninfo.html?classuid='+ item.classuid +'" class="ml5"><span class="btn btn-primary btn-sm btn-inverse">'+i18next.t('table.lesson')+'</span></a>').appendTo($handleTd)
          var $deletebtn = $('<a href="javascript:;"><span class="btn btn-danger btn-sm btn-inverse">'+i18next.t('table.delete')+'</span></a>').appendTo($handleTd)
          $deletebtn.on('click', function () {
            var popUpBox = new PopUpBox({
              type: 'dom',
              style: 'default contentScroll',
              submitBtnType: 'confirm',
              titleText: i18next.t('popupbox.systemmessages'),
              show: true,
              content: '<div style="padding:30px">'+i18next.t('popupbox.delclass')+'</div>',
              callback: {
                 yes: function (e) {
                   ajaxMethod({
                     url: '/api/classe/' + item.classuid,
                     method: 'delete',
                     success: function(data, status) {
                       if(status.code == 0) {
                         pagination.updateData()
                       }
                     }
                   })
                 }
              },
              position: {
                 width: 420,
                 height: 200
              }
            })
          })

          $tbody.append($classItem)
        })
        $pagination.show()
      }
    })
  }

  function loadSearchData(querystr) {
    if(querystr) {
      pagination.filter.coursename = querystr
      pagination.filter.classname = querystr

      pagination.searchData()
    } else {
      pagination.reloadData()
    }
  }


  $('#J_class_search').on('click', function() {
    var $input = $(this).prev();
    var querystr = $.trim($input.val());
    loadSearchData(querystr)
  })

  $('.searchInput').on('keyup', function(e) {
    if(e.keyCode == 13) {
      var querystr = $.trim($(this).val());
      loadSearchData(querystr)
    }
  })

  pagination = new Pagination($pagination, getClassList)
})
